
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>登录网关</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			height: 100%;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
		}

		.login {
			width: 400px;
			height: 280px;
			background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
			border-radius: 8px;
		}

		.login h1 {
			height: 38px;
			width: 93%;
			background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			line-height: 38px;
			font-size: 30px;
			text-align: center;
			border-radius: 5px;
			margin: 15px auto;
		}

		.login-form {
			width: 60%;
			margin: 0 auto;
		}

		.login-form form input {
			width: 220px;
			height: 30px;
			outline: none;
			margin: 10px auto;
			border-radius: 5px;
			padding-left: 5px;
		}

		.button {
			line-height: 30px;
			height: 30px;
			width: 70px;
			color: #ffffff;
			background-color: #4a8cf7;
			font-size: 16px;
			font-weight: normal;
			font-family: Arial;
			border: 0px solid #dcdcdc;
			border-radius: 3px;
			text-align: center;
			display: inline-block;
			cursor: pointer;
		}

		.button:hover {
			background-color: #446bf7;
		}

		.error-msg {
			color: #ff3333;
			font-size: 12px;
			height: 15px;
			text-align: center;
			margin-bottom: 5px;
		}

		.footer {
			position: fixed;
			bottom: 0;
			height: 50px;
			font-size: 12px;
			text-align: center;
			font-family: "宋体";
		}
	</style>
</head>

<body>
	<div class="login">
		<h1>边缘计算网关</h1>
		<div class="login-form">
			<form method="post" onsubmit="return validateForm()">
				<div class="error-msg" id="errorMsg"></div>
				<input type="text" name="username" id="usr" value="" placeholder="请输入用户名" />
				<input type="password" name="password" id="pwd" value="" placeholder="请输入密码" />
				<input type="submit" class="button" value="登    录" />
			</form>
		</div>
	</div>
	<div class="footer">
		联系电话: 400-706-1880 &nbsp 技术支持QQ: 1075518044<br>
		开发商：华清远见济南研发中心 <a href="http://www.farsight.com.cn" target="_blank"><b>边缘计算网关B/S版</b></a>
	</div>

	<script>
		function validateForm() {
			const username = document.getElementById('usr').value.trim();
			const password = document.getElementById('pwd').value.trim();
			const errorMsg = document.getElementById('errorMsg');
			
			if(username === '' || password === '') {
				errorMsg.textContent = '用户名和密码不能为空';
				return false;
			}
			
			if(username !== 'admin' || password !== 'password') {
				errorMsg.textContent = '用户名或密码错误';
				return false;
			}
			
			// 验证通过，跳转到index.html
			window.location.href = './index.html';
			return false; // 阻止表单默认提交行为
		}
	</script>
</body>
</html>
